<!DOCTYPE html>
<html>
<head>
    <title>Image Upload and Recognition</title>
</head>
<body>
<h1>上传图片并识别</h1>
<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="imageInput" name="img" accept="image/*">
    <button type="button" onclick="uploadImage()">识别</button>
</form>
<div>
    <p>识别结果:</p>
    <p id="res"></p>
</div>
<script>
    function uploadImage() {
        var fileInput = document.getElementById('imageInput');
        var file = fileInput.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var base64Data = e.target.result;
                fetch('/api/face', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({img: base64Data})
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);
                        // 可以在这里更新页面内容
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            };
            reader.readAsDataURL(file); // 将文件读取为Data URL
        }
    }
</script>
</body>
</html>